<!-- 背题模式 -->
<template>
	<div class="rightcenter">
		<div class="right-centerr" v-for="(item, index) in records" :key="index">
			<el-row>
				<el-col>
					<p>{{ item.content }}</p>
				</el-col>
			</el-row>
			<el-row></el-row>
			<el-row>
				<el-col v-if="item.typeName == '单选题' || item.typeName == '判断题'">
					<el-radio-group v-model="radio">
						<el-radio v-for="(item, index) in optionList" :label="index" :key="index"
							@change="radiochange(index)" :disabled="disables">
							{{ item.value }}:{{ item.name }}
						</el-radio>
					</el-radio-group>
				</el-col>
				<el-col v-if="item.typeName == '多选题'">
					<el-checkbox-group v-model="checkList">
						<el-checkbox v-for="(item, index) in optionList" :key="index" :disabled="disables"
							:label="index" @change="checkchange(index)">
							{{ item.value }}:{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
			<!-- 案例分析题 -->
			<el-row v-if="item.typeName == '案例分析题'">
				<el-col v-for="(item1, childQ) in children" :key="childQ"
					v-if="item1.typeName == '单选题' || item1.typeName == '判断题'">
					<p>{{ item1.content }}</p>
					<el-radio-group v-model="caseAnalysis[childQ]">
						<el-radio v-for="(item, optionIndex) in children[childQ].optionList" :label="item.value"
							:key="optionIndex" :disabled="item.disabled">
							{{ item.value }}:{{ item.name }}
						</el-radio>
					</el-radio-group>
					<p :style="{'color': color}">参考答案：{{ item1.anser }}</p>
				</el-col>
				<el-col v-for="(item1, childQ) in children" :key="childQ" v-if="item1.typeName == '多选题'">
					<p>{{ item1.content }}</p>
					<el-checkbox-group v-model="caseAnalysis[childQ]">
						<el-checkbox v-for="(item, optionIndex) in children[childQ].optionList" :key="optionIndex"
							:disabled="item.disabled" :label="item.value">
							{{ item.value }}:{{ item.name }}
						</el-checkbox>
					</el-checkbox-group>
					<p :style="{'color': color}">参考答案：{{ item1.anser }}</p>
				</el-col>
			</el-row>

			<!-- 答案显示 -->
			<el-row>
				<el-col>
					<p v-if="radio >= 0 || isan == true" :style="{'color': color}">{{ answerinfo }}</p>
				</el-col>
			</el-row>
			<br />
			<el-row>
				<el-col>
					<el-button  size="mini" v-if="current > 1"
						@click="preQuestion(current, menuId, size, userId)" class="preornext">上 一 题</el-button>
					<el-button  size="mini" v-if="current < pages"
						@click="nextquestion(current, menuId, size, userId)" class="preornext">下 一 题
					</el-button>
					<el-button  size="mini" @click="quitBackTopic()" class="preornextemit">退 出</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import {
		order
	} from "../api/index.js";
	export default {
		name: "practice",
		data() {
			return {
				apiType: '',
				checkList: [],
				disables: false,
				radio: "",
				innerVisible: false,
				userId: "",
				records: [],
				current: 1,
				size: 1,
				menuId: "",
				optionList: [],
				answerinfo: "",
				answerList: [],
				checkchangedata: [],
				isan: false,
				pages: "",
				total: '',
				children: [],
				childoptionList: [],
				ALFXDXT: "",
				caseAnalysis: [],
				ischeck: false,
				color:'#0E8FFD'
			};
		},
		mounted() {
			this.apiType = this.$route.query.apiType
			this.userId = JSON.parse(localStorage.getItem("userId"));
			console.log("id", this.userId);
			this.menuId = JSON.parse(localStorage.getItem("menuId"));
			console.log("id", this.menuId);
			// this.menuId37
			this.getQuestionById(this.current, this.menuId, this.size, this.userId);
			console.log("mounted", this.current);
		},
		methods: {
			quitBackTopic() {
				this.$router.push("courcesinfo")
			},
			// 多选确认
			sureemit() {
				//排序
				var anser = "";
				this.checkchangedata = this.checkchangedata.sort();
				console.log("提交", this.checkchangedata);
				this.answerList = this.answerList.sort();
				console.log("正确答案", this.answerList);
				var answer = this.answerList.toString().toUpperCase();
				var checked = this.checkchangedata.toString().toUpperCase();
				if (checked == answer) {
					this.answerinfo = "回答正确";
				} else {
					this.answerinfo = "正确答案为:" + answer;
				}
				this.isan = true;
				this.disables = true;
			},
			// 多选change
			checkchange(index) {
				console.log(index);
				this.checkchangedata = this.checkchangedata.concat(
					this.optionList[index].value
				);
				console.log(this.checkchangedata);
			},
			// 单选Change
			radiochange(number) {
				console.log("radio", number);
				console.log(this.optionList[number].value);
				console.log(this.answerList[0]);
				this.disables = true;
				if (this.optionList[number].value != this.answerList[0]) {
					this.answerinfo = "正确答案为:" + this.answerList[0];
				} else {
					this.answerinfo = "回答正确";
				}
			},
			// 案例分析单选Change
			radioMultiChange(e, childQ) {
				console.log("e", e, childQ);
				var question = this.children[childQ];
				this.$set(question, "ischeck", true);

				console.log(question.answerList[0]);
				console.log(this.radio2);

				if (this.caseAnalysis[childQ] != question.answerList[0]) {
					this.$set(question, "answerinfo", "正确答案:" + question.answerList[0]);
				} else {
					this.$set(question, "answerinfo", "回答正确");
				}

				question.optionList.forEach((item) => {
					item.disabled = true;
				});
			},
			// 案例分析确认多选题
			caseAnalysisEmit(childQ) {
				var question = this.children[childQ];

				var checkchangedata = this.caseAnalysis[childQ].sort();
				var answerList = question.answerList.sort();

				var answer = answerList.toString().toUpperCase();
				var checked = checkchangedata.toString().toUpperCase();

				if (checked == answer) {
					this.$set(question, "answerinfo", "回答正确");
				} else {
					this.$set(question, "answerinfo", "正确答案:" + answer);
				}

				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});
			},
			setTopicData(datas) {
				console.log('datas', datas.records);
				this.pages = datas.pages;
				this.total = datas.total;
				this.records = datas.records;
				// console.log(this.records);
				for (var i = 0; i < this.records.length; i++) {
					this.optionList = this.records[i].optionList;
					this.answerList = this.records[i].answerList;
					this.children = this.records[i].children;
					if (this.records[i].typeName == "案例分析题") {
						for (var c = 0; c < this.children.length; c++) {
							if (
								this.children[c].typeName == "单选题" ||
								this.children[c].typeName == "判断题"
							) {
								this.caseAnalysis[c] = "";
							} else if (this.children[c].typeName == "多选题") {
								this.caseAnalysis[c] = [];
							}
						}
					}
				}
				var aStr = ''
				this.answerList.forEach((item) => {
					aStr += item + ','
				})
				this.optionList.forEach((item, index) => {
					if (this.records[0].typeName !== '案例分析题' && this.records[0].typeName !== '多选题') {
						if (aStr.includes(item.value)) {
							this.radio = index
							this.answerinfo = "参考答案：" + item.value;
						}
					} else {
						item.checked = true
						this.answerinfo = "参考答案：" + this.records[0].anser
					}
				})
				console.log('radio', this.radio)
				console.log('optionList', this.optionList)
				this.disables = true;
				this.checkList = [];
				this.checkchangedata = [];
				this.isan = true;
			},
			// 获取题目
			getQuestionById(ncurrent, nmenuId, nsize, nuserId) {
				order({
					apiType: this.apiType,
					current: ncurrent,
					menuId: nmenuId,
					size: nsize,
					userId: nuserId,
				}).then((res) => {
					// console.log('resssssss', res)
					if (res.data.code === 0) {
						this.setTopicData(res.data.data)
					} else {
						this.$message({
							type: "error",
							message: res.data.msg,
						});
					}
				}).catch((error) => {
					this.$message({
						type: "error",
						message: error,
					});
				});
			},
			// 上一题
			preQuestion(ncurrent, nmenuId, nsize, nuserId) {
				this.current = ncurrent - 1;
				this.getQuestionById(this.current, nmenuId, nsize, this.userId);
			},
			// 下一题
			nextquestion(ncurrent, nmenuId, nsize, nuserId) {
				this.current = ncurrent + 1;
				this.getQuestionById(this.current, nmenuId, nsize, this.userId);
			},
			quit() {
				this.$router.push("courcesinfo");
			},
		},
	};
</script>

<style scoped>
	button {
		margin-left: 5%;
	}

	.dialog-container {
		width: 100%;
		height: 300px;
		border: 1px solid black;
	}

	.dialog-center {
		width: 60%;
		height: 80px;
		margin: auto;
		margin-top: 15%;
		text-align: center;
		border: 1px solid black;
	}

	.dialog-center1 {
		width: 60%;
		height: 120px;
		margin: auto;
		margin-top: 10%;
		text-align: center;
		border: 1px solid black;
	}

	.finally {
		margin: auto;
		margin-left: 50%;
		margin-top: 20px;
	}

	.rightcenter {
		text-align: left;
		margin-left: 3%;
	}
	.preornext {
		background-color: #469DED;
		border: 1px solid #FD8C27;
		color: white;
		margin-top: -8%;
		width: 75px;
		border-radius: 5px;
	}
	
	.preornextemit {
		background-color: #FD8C27;
		border: 1px solid #469DED;
		color: white;
		margin-top: -8%;
		width: 65px;
		border-radius: 5px;
	}
</style>
